import React from "react";

import { Switch, Divider, Card, Input, AutoComplete } from "antd";
import { CloseOutlined, CheckOutlined } from "@ant-design/icons";

import FontList from "./FontList";

import "./index.css";

/**
 *
 * @param {{
 * bordered:boolean,
 * onSwitchChange:(checked:boolean,event)=>void,
 * data:any[],
 * loading:boolean,
 * onFontChange: (checkedValue: any) => void;
 * onDownloadClick: (e: any) => void;
 * onLoadMore: (e: any) => void;
 * onSearch: (value,event)=>void
 * }} props
 */
function FontListTab(props) {
  const {
    onSwitchChange,
    bordered,
    onSearch,
    loading,
    onLoadMore,
    data,
    checked,
    onDownloadClick,
    onFontChange,
  } = props;

  return (
    <div
      className="fontlist_tab"
      style={{
        background: "#ececec",
        // margin: "15px",
        height: "531px",
        overflowY: "scroll",
        // boxShadow: "rgb(203, 196, 196) 0px 3px 11px 1px",
        // borderRadius: "30px",
      }}
    >
      <Card style={{ marginBottom: "10px" }}>
        <div>
          <span style={{ marginLeft: "10px" }}>مەۋھۇم رامكا كۆرۈنسۇنمۇ؟</span>
          <Switch
            onChange={onSwitchChange}
            checkedChildren={<CheckOutlined />}
            unCheckedChildren={<CloseOutlined />}
            checked={bordered}
          />
        </div>
      </Card>

      <Card title="خەت شەكىللىرى">
        <AutoComplete
          dropdownMatchSelectWidth={252}
          style={{ width: 300 }}
          onSearch={(value, event) => {
            onSearch && onSearch(value, event);
          }}
        >
          <Input.Search
            style={{ direction: "ltr", margin: "10px", marginBottom: "-5px" }}
            size="large"
            placeholder="خەت شەكلى نامىنى يېزىڭ"
            allowClear
          />
        </AutoComplete>

        <Divider />
        <FontList
          {...{
            loading,
            onLoadMore,
            data,
            checked,
            onDownloadClick,
            onFontChange,
          }}
        />
      </Card>
    </div>
  );
}

export default FontListTab;
